<template>
    <div class="common-layout">
        <el-container style="height:100%">
            <el-aside width="200px">
                <div class=" common-layout-aside sa-flex-col sa-col-center">
                    <el-button class="addBtn" v-auth="'shop.admin.attr.shop_type.add'" type="primary" 
                        @click="addType">新建分类
                    </el-button>
                    <div class="typeList">
                        <div class="typeList-item">
                            <div class="sa-flex sa-row-center">
                                <span class="right">全部分类</span>
                            </div>
                        </div>
                        <div :class="['typeList-item',{active : item.id === table.id }]" v-for="item in table.typeList" :key="item.id" @click="setType(item)">
                            <div class="sa-flex">
                                <sa-icon class="icon sa-m-r-4" :icon="'ep:caret-right'" size="16" />
                                <span class="right">{{item.type_name}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-aside>
            <el-container>
                <el-header>
                    <div class="sa-title sa-flex sa-row-between">
                        <div class="label sa-flex">
                            <span class="left">商品列表</span>
                            <search-condition :conditionLabel="filterParams.conditionLabel"
                                @deleteFilter="deleteFilter"></search-condition>
                        </div>
                        <div>
                            <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
                            <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
                            <el-button v-auth="'shop.admin.attr.shop_type.addservice'" icon="Plus" type="primary"
                                @click="addRow">新建
                            </el-button>
                        </div>
                    </div>
                </el-header>
                <el-main>
                    <div class="sa-table-wrap" v-loading="loading">
                        <el-table height="100%" class="sa-table" :data="table.data" @selection-change="changeSelection"
                            @sort-change="fieldFilter" @row-dblclick="editRow" :expand-row-keys="expandRowKeys"
                            row-key="id" stripe>
                            <template #empty>
                                <sa-empty></sa-empty>
                            </template>
                            <el-table-column type="selection" width="50" align="center"></el-table-column>
                            <el-table-column sortable="custom" prop="id"  label="ID" min-width="80"></el-table-column>
                            <el-table-column label="服务图标" min-width="80" align="center">
                                <template #default="scope">
                                    <div class="sa-flex sa-row-center">
                                        <sa-preview :url="scope.row.icon_url" size="40"></sa-preview>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="服务名称" prop="type_name"  align="center" show-overflow-tooltip></el-table-column>
                            <el-table-column label="服务分类" prop="service_type_name"  align="center" show-overflow-tooltip></el-table-column>
                            <el-table-column label="服务数量" prop="service_number"  align="center"></el-table-column>
                            <el-table-column label="备注" prop="remake"  align="center" show-overflow-tooltip></el-table-column>
                            <el-table-column label="操作" min-width="80" fixed="right"  align="center">
                                <template #default="scope">
                                    <div class="sa-flex sa-row-center">
                                        <el-button v-auth="'shop.admin.attr.shop_type.edit'" class="is-link sa-m-l-12"
                                            type="primary" @click="editRow(scope.row)">编辑
                                        </el-button>
                                        <el-popconfirm width="fit-content" confirm-button-text="确认"
                                            cancel-button-text="取消" title="确认删除这条记录?"
                                            @confirm="deleteRow(scope.row.id)">
                                            <template #reference>
                                                <el-button v-auth="'shop.admin.attr.shop_type.delete'" class="is-link"
                                                    type="danger">
                                                    删除
                                                </el-button>
                                            </template>
                                        </el-popconfirm>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-main>
                <!-- <el-footer>Footer</el-footer> -->
                <sa-view-bar>
                    <template #left>
                        <sa-batch-handle :batchHandleTools="batchHandleTools" :selectedLeng="table.selected.length"
                            @batchHandle="batchHandle"></sa-batch-handle>
                    </template>
                    <template #right>
                        <sa-pagination :pageData="pageData" @updateFn="getData" />
                    </template>
                </sa-view-bar>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { api } from './goods.service';
import { useModal, usePagination } from '@/sheep/hooks';
import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
import { composeFilter } from '@/sheep/utils';
import { cloneDeep } from 'lodash';
import {ElMessageBox} from 'element-plus';

import typeEdit from './type.vue';
// import serviceEdit from './service/index.vue';
import {useRouter} from 'vue-router';

const router = useRouter();
let expandRowKeys = reactive([]);
const { pageData } = usePagination();
const loading = ref(true);
// 表格
const table = reactive({
    id:'',
    data: [],
    typeList: [],
    order: 'desc',
    sort: 'id',
    selected: [],
});
// 批量操作
const batchHandleTools = [
    {
        type: 'delete',
        label: '删除',
        auth: 'shop.admin.attr.shop_type.delete',
        class: 'danger',
    },
    // {
    //     type: 'up',
    //     label: '上架',
    //     auth: 'shop.admin.goods.goods.edit',
    //     class: 'success',
    // },
    // {
    //     type: 'down',
    //     label: '下架',
    //     auth: 'shop.admin.goods.goods.edit',
    //     class: 'danger',
    // },
    // {
    //     type: 'hidden',
    //     label: '隐藏',
    //     auth: 'shop.admin.goods.goods.edit',
    //     class: 'info',
    // },
];

const filterParams = reactive({
    // 搜索自定义工具
    tools: {
        type_name: {
            type: 'tinput',
            field: 'type_name',
            value: '',
            label: '搜索',
            placeholder: '请输入查询内容',
        },
    },
    data: {
        type_name: '',
    },
    conditionLabel: {},
});
const { openFilter, deleteFilter } = useSearch({
    filterParams,
    getData,
});

onMounted(() => {
    getTypeList()
    // getData()
})

async function getData() {
    loading.value = true;
    let tempSearch = cloneDeep(filterParams.data);
    let search = composeFilter(tempSearch, {
        type_name: 'like',
    });
    let { data, error } = await api.service.list({
        page: pageData.page,
        id:table.id,
        list_rows: pageData.list_rows,
        order:table.order,
        sort:table.sort,
        ...search
    })
    if (error == 0) {
        table.data = data.data;
        pageData.page = data.current_page;
        pageData.list_rows = data.per_page;
        pageData.total = data.total;
    }
    loading.value = false;
}
async function getTypeList() {
    loading.value = true;

    let { data, error } = await api.service.typeList()
    if (error == 0) {
        table.typeList = data
        if(data.length){
            setType(data[0])
        }
    }
    loading.value = false;
}
function setType(e){
    table.id = e.id
    getData()
}
// table 批量选择
function changeSelection(row) {
    table.selected = row;
}

function editRow(data) {
    router.push({
        path: '/seller/admin/service',
        query: {
        type: 'edit',
        id:data.id
        },
  });
}
function addRow() {
    router.push({
        path: '/seller/admin/service',
        query: {
        type: 'add',
        id:table.id
        },
  });
}
function addType(){
      useModal(
          typeEdit,
          {
            title: '新增分类',
            type: 'add',
          },
          {
            confirm: () => {
                getTypeList();
            },
          },
      );
}
// table 字段排序
function fieldFilter({ prop, order }) {
    table.order = order == 'ascending' ? 'asc' : 'desc';
    table.sort = prop;
    getData();
}


async function batchHandle(type) {
    let ids = [];
    table.selected.forEach((row) => {
        ids.push(row.id);
    });
    switch (type) {
        case 'delete':
            ElMessageBox.confirm('此操作将删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                deleteRow(ids.join(','));
            });
            break;
        default:
            handleCommand({ id: ids.join(','), type: type });
    }
}
async function handleCommand(e) {
    //   await api.goods.edit(e.id, {
    //     status: e.type,
    //   });
    getData();
}
async function deleteRow(id) {
    await api.service.delType(id);
    getData();
}

</script>

<style scoped lang="scss">
.common-layout {
    height: 100%;
    .common-layout-aside {
        padding: 20px;
        .addBtn{
            border-radius: 40px;
        }
    }
}
.typeList{
    width: 150px;
    margin-top: 20px;
    .typeList-item{
        padding: 10px 0 ;
    }
    .active{
        color: #409EFF;
    }
}
</style>